<!--
 * @Author: ReinerLau lk850593913@gmail.com
 * @Date: 2022-09-20 15:36:51
 * @LastEditors: ReinerLau lk850593913@gmail.com
 * @LastEditTime: 2023-02-16 16:22:31
 * @FilePath: \robot\src\views\patroling\FrameSwitchOver.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="p-5">
    <div class="text-white mb-7">全屏画面切换</div>
    <div class="flex mb-7 justify-between">
      <CircleButton @click="onClick('01')">
        <SvgIcon class="w-6" name="patroling-full_switch"></SvgIcon>
      </CircleButton>
      <CircleButton @click="onClick('02')">
        <span>返回</span>
      </CircleButton>
    </div>
    <div class="flex justify-center mb-7">
      <CircleButton class="!w-60 !h-60 flex-col">
        <div
          class="flex-1 flex items-center cursor-pointer"
          @click="onClick('03')"
        >
          <SvgIcon class="w-6 h-6" name="patroling-dir_up"></SvgIcon>
        </div>
        <div class="flex-1 flex items-center w-full">
          <div class="flex-1 flex justify-center" @click="onClick('06')">
            <SvgIcon class="w-6 h-6" name="patroling-dir_c_lf"></SvgIcon>
          </div>
          <div class="flex-1 h-full" @click="onClick('07')">
            <CircleButton class="!w-full !h-full">确认</CircleButton>
          </div>
          <div class="flex-1 flex justify-center" @click="onClick('04')">
            <SvgIcon class="w-6 h-6" name="patroling-dir_c_rt"></SvgIcon>
          </div>
        </div>
        <div class="flex-1 flex items-center" @click="onClick('05')">
          <SvgIcon class="w-6 h-6" name="patroling-dir_down"></SvgIcon>
        </div>
      </CircleButton>
    </div>
    <div class="flex justify-between mb-7">
      <CircleButton @click="onClick('12')">
        <SvgIcon class="w-6 h-6" name="patroling-prev"></SvgIcon>
      </CircleButton>
      <CircleButton @click="onClick('08')">
        <span>AV1</span>
      </CircleButton>
      <CircleButton @click="onClick('09')">
        <span>AV2</span>
      </CircleButton>
    </div>
    <div class="flex justify-center">
      <div class="flex-1 flex justify-center">
        <CircleButton @click="onClick('10')">
          <span>AV3</span>
        </CircleButton>
      </div>
      <div class="flex-1 flex justify-center">
        <CircleButton @click="onClick('11')">
          <span>AV4</span>
        </CircleButton>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import CircleButton from "./CircleButton.vue";
import { patrolingCruise } from "@/api/remote-control.js";
import { watch, computed } from "vue";
import { ElNotification } from "element-plus";
import usePatrolingStore from "@/store/patroling";
import { storeToRefs } from "pinia";

const { patrolingInfo } = storeToRefs(usePatrolingStore());
const caritem = computed(() => {
  return patrolingInfo.value.robotid;
});

const formData = {
  code: "",
  param1: "08",
  param2: "",
  param3: "0",
  param4: "0",
};

watch(caritem, () => {
  formData.code = caritem.value;
});

async function onClick(value) {
  if (!formData.code) {
    ElNotification({
      title: "提示",
      message: "请选择控制的车辆",
      type: "warning",
    });
    return;
  }
  formData.param2 = value;
  await patrolingCruise(formData);
}
</script>
